<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>${article.title}</title>
	<!-- static start -->
	<link rel="stylesheet" href="../cdn/public/bootstrap/3.3.7/css/bootstrap.min.css">
    <script type="text/javascript" src="../cdn/public/jquery/1.12.4/jquery.min.js"></script>
	<script type="text/javascript" src="../cdn/public/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<!-- static end -->
	<style type="text/css">
* {
	font-size: 16px;
}
	</style>
	<script type="text/javascript">
function doReply(el) {
	var parentNode = $(el).parent();
	var commentId = parentNode.children('input[type=hidden]').val();
	var content = parentNode.children('textarea').val();
	
	$.post('cms-comment-reply.do', {
		articleId: '${article.id}',
		commentId: commentId,
		content: content
	}, function() {
		location.reload();
	});
}
	</script>
  </head>
  <body>
    <div class="container" style="font-size:12px;">
	  <div class="row">
	  <div class="col-md-6">
	    &nbsp;
	  </div>
	  <div class="col-md-6 text-right">
	    <a href='../portal/index.do' style="font-size:12px;">个人中心</a>
	  </div>
	  </div>
	</div>

	<div class="container" style="line-height:7rem;margin-bottom:10px;">
	  <div class="row">
	  <div class="col-md-2" style="font-size:3rem;">
	    Mossle
	  </div>
	  <div class="col-md-10">
	    <div class="text-center" style="background-color:#F8F8F8;color:white;">
	      &nbsp;
		</div>
	  </div>
	  </div>
	</div>

    <!-- navbar start -->
    <div class="container">
	  <div class="navbar navbar-default" role="navigation" style="margin-bottom:10px;">
        <div class="navbar-header">
          <a class="navbar-brand" href="cms-site-view.do">首页</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
		    <#list catalogs as catalog>
            <li class=""><a href="cms-catalog-view.do?id=${catalog.id?string('#')}">${catalog.name}</a></li>
			</#list>
          </ul>
		</div>
	</div>
    </div>
    <!-- navbar end -->


    <div class="container">
      <div class="row">


        <!-- left start -->
        <div class="col-md-9">


		  <div class="panel panel-default">
		  <div class="panel-body">
		    <span style="color:gray;">
			  首页
			  /
			  <a href="cms-catalog-view.do?id=${article.cmsCatalog.id?string('#')}">${article.cmsCatalog.name}</a>
			</span>

          <h3 style="margin-top:10px;">${article.title}</h3>
		  <p>
	        <span style="color:gray;">${(userConnector.findById(article.userId).displayName)!}</span>
			|
		    <span style="color:gray;"><#if article.publishTime??>${article.publishTime?string("yyyy-MM-dd HH:mm")}</#if></span>
			<span style="color:gray;"><i class="glyphicon glyphicon-eye-open"></i> ${article.hitCount!}</span>

			<span style="color:gray;">tags</span>
		    <span style="color:gray;">tags</span>
	      </p>

	    <#if article.logo??>
	      <img src="${article.logo}">
	    </#if>

        <#--
	    <#if article.summary??>
	      <p style="color:gray;">${article.summary!}</p>
	    </#if>
		--#>
	
	      <hr>
	      <!-- ==================================================================== -->
          ${article.content!}

	      <!-- ==================================================================== -->

	    <#if article.cmsAttachments??>
		  <#list article.cmsAttachments as item>
	      <p><a href="../rs/cms/attachments?key=${item.path}">${item.name}</a></p>
		  </#list>
	    </#if>
        
		    </div>
		  </div>

		  <div class="panel panel-default">
		    <div class="panel-body">
			  <form method="POST" action="cms-comment-submit.do">
			    <input type="hidden" name="articleId" value="${article.id?string('#')}">
			    <div class="form-group">
				  <textarea name="content" class="form-control" placeholder="评论"></textarea>
			    </div>
			    <div class="form-group text-right">
				  <button class="btn btn-default">发布</button>
			    </div>
			  </form>
			  <hr>
			  <#list page.result as commentDto>
			  <#assign comment=commentDto.cmsComment/>
			  <div style="clear:both;margin-bottom:10px;">
				<div style="float:left;width:50px;position:relative;">
				  <img src="../rs/avatar?id=1" width="40" height="40" class="img-circle">
				</div>
				<div style="padding-left: 50px;">
				  <div style="color:silver;float:right;font-size:12px;line-height:12px;padding-top:5px;"><#if comment.createTime??>${comment.createTime?string("yyyy-MM-dd HH:mm")}</#if></div>
				  <div style="color:gray;font-size:12px;line-height:12px;padding-top:5px;">${(userConnector.findById(comment.userId).displayName)!} username</div>
				  <div style="font-size:14px;padding-top:12px;">${comment.content}</div>
				  <div class="text-right" style="font-size:12px;color:silver;">
				    <span style="color:white;font-size:12px;cursor:pointer;" onmouseover="this.style.color='gray'" onmouseout="this.style.color='white'">
					  <i class="glyphicon glyphicon-flag"></i>举报&nbsp;
					</span>
					<span style="cursor:pointer;font-size:12px;" onclick="$(this).parent().parent().children('.comment-reply').toggle()">
					  回复
					</span>
					&nbsp;
					<i class="glyphicon glyphicon-thumbs-up"></i>&nbsp;
					<i class="glyphicon glyphicon-thumbs-down"></i>&nbsp;
				  </div>
				  <div class="comment-reply text-right" style="display:none;">
				    <input type="hidden" name="id" value="${comment.id?c}">
				    <textarea class="form-control" style="margin-top:5px;"></textarea>
					<button class="btn btn-default btn-xs" style="margin-top:5px;" onclick="doReply(this)">回复</button>
				  </div>
				</div>
		      </div>
			  <div style="padding-left:50px;">
<#list commentDto.children as child>
			  <div style="clear:both;margin-bottom:10px;">
				<div style="float:left;width:50px;position:relative;">
				  <img src="../rs/avatar?id=1" width="40" height="40" class="img-circle">
				</div>
				<div style="padding-left: 50px;">
				  <div style="color:silver;float:right;font-size:12px;line-height:12px;padding-top:5px;"><#if child.createTime??>${child.createTime?string("yyyy-MM-dd HH:mm")}</#if></div>
				  <div style="color:gray;font-size:12px;line-height:12px;padding-top:5px;">${(userConnector.findById(child.userId).displayName)!} username</div>
				  <div style="font-size:14px;padding-top:12px;">
				    <#if child.cmsComment != comment>
					  @${child.cmsComment.userId!}
					</#if>
				    ${child.content}
				  </div>
				  <div class="text-right" style="font-size:12px;color:silver;">
				    <span style="color:white;font-size:12px;cursor:pointer;" onmouseover="this.style.color='gray'" onmouseout="this.style.color='white'">
					  <i class="glyphicon glyphicon-flag"></i>举报&nbsp;
					</span>
					<span style="cursor:pointer;font-size:12px;" onclick="$(this).parent().parent().children('.comment-reply').toggle()">
					  回复
					</span>
					&nbsp;
					<i class="glyphicon glyphicon-thumbs-up"></i>&nbsp;
					<i class="glyphicon glyphicon-thumbs-down"></i>&nbsp;
				  </div>
				  <div class="comment-reply text-right" style="display:none;">
				    <input type="hidden" name="id" value="${child.id?c}">
				    <textarea class="form-control" style="margin-top:5px;"></textarea>
					<button class="btn btn-default btn-xs" style="margin-top:5px;" onclick="doReply(this)">回复</button>
				  </div>
				</div>
		      </div>
</#list>
			  </div>
			  </#list>


			<hr>

<#if (page.pageCount > 1)>
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
	  <#if page.previousEnabled>
      <a href="?id=${article.id?string('#')}&pageNo=${page.pageNo - 1}" aria-label="Previous">
      <#else>
      <a href="javascript:void(0);" aria-label="Previous">
	  </#if>
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
	<#list 1..page.pageCount as i>
    <li><a href="?id=${article.id?string('#')}&pageNo=${i}">${i}</a></li>
	</#list>
    <li>
	  <#if page.nextEnabled>
      <a href="?id=${article.id?string('#')}&pageNo=${page.pageNo + 1}" aria-label="Next">
      <#else>
      <a href="javascript:void(0);" aria-label="Previous">
	  </#if>
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>
</#if>

			</div>
		  </div>
		</div>
	    <!-- left end -->

		<!-- right start -->
		<div class="col-md-3">

		  <div class="panel panel-default">
		    <div class="panel-body">
		    <div style="font-size:18px;margin-bottom:5px;">热门标签</div>
			<p style="color:gray;">tags, tags</p>
			</div>
		  </div>
		</div>
	    <!-- right end -->

      </div>
    </div>

    <hr>

    <div class="container">
      <div class="row" style="text-align:center;">
        &copy; Mossle
      </div>
    </div>

  </body>
</html>
